<m-notice [icon]="'flaticon-exclamation m--font-primary'">
	For more info please check the components's official demos & documentation 
	<a class="m-link" href="https://material.angular.io/components/button/overview" target="_blank">demos & documentation</a>
</m-notice>

<div class="row">
	<div class="col-xl-6">
		<m-material-preview [viewItem]="exampleBasic">
			<div class="m-section">
				<p class="m-section__sub">
					Angular Material buttons are native
					<code>&lt;button&gt;</code> or
					<code>&lt;a&gt;</code> elements enhanced with Material Design styling and ink ripples.
				</p>
				<p class="m-section__sub">
						Native
						<code>&lt;button&gt;</code> and
						<code>&lt;a&gt;</code> elements are always used in order to provide the most straightforward and accessible experience for users. A
						<code>&lt;button&gt;</code> element should be used whenever some action is performed. An
						<code>&lt;a&gt;</code> element should be used whenever the user will navigate to another view.
					</p>
				<div class="m-separator m-separator--dashed"></div>
				<div class="example-container">
					<div class="button-row">
						<button mat-button>Basic</button>&nbsp;
						<button mat-button color="primary">Primary</button>&nbsp;
						<button mat-button color="accent">Accent</button>&nbsp;
						<button mat-button color="warn">Warn</button>&nbsp;
						<button mat-button disabled>Disabled</button>&nbsp;
						<a mat-button routerLink=".">Link</a>
					</div>
				</div>
			</div>
		</m-material-preview>

		<m-material-preview [viewItem]="exampleRaised">
			<div class="m-section">
				<div class="example-container">
					<div class="button-row">
						<button mat-raised-button>Basic</button>&nbsp;
						<button mat-raised-button color="primary">Primary</button>&nbsp;
						<button mat-raised-button color="accent">Accent</button>&nbsp;
						<button mat-raised-button color="warn">Warn</button>&nbsp;
						<button mat-raised-button disabled>Disabled</button>&nbsp;
						<a mat-raised-button routerLink=".">Link</a>
					</div>
				</div>
			</div>
		</m-material-preview>

		<m-material-preview [viewItem]="exampleIcon">
			<div class="m-section">
				<div class="example-container">
					<div class="button-row">
						<button mat-icon-button>
							<mat-icon aria-label="Example icon-button with a heart icon">favorite</mat-icon>
						</button>&nbsp;
						<button mat-icon-button color="primary">
							<mat-icon aria-label="Example icon-button with a heart icon">favorite</mat-icon>
						</button>&nbsp;
						<button mat-icon-button color="accent">
							<mat-icon aria-label="Example icon-button with a heart icon">favorite</mat-icon>
						</button>&nbsp;
						<button mat-icon-button color="warn">
							<mat-icon aria-label="Example icon-button with a heart icon">favorite</mat-icon>
						</button>&nbsp;
						<button mat-icon-button disabled>
							<mat-icon aria-label="Example icon-button with a heart icon">favorite</mat-icon>
						</button>
					</div>
				</div>
			</div>
		</m-material-preview>
	</div>
	<div class="col-xl-6">
		<m-material-preview [viewItem]="exmapleFab">
			<div class="m-section">
				<div class="example-container">
					<div class="button-row">
						<button mat-fab>Basic</button>&nbsp;
						<button mat-fab color="primary">Primary</button>&nbsp;
						<button mat-fab color="accent">Accent</button>&nbsp;
						<button mat-fab color="warn">Warn</button>&nbsp;
						<button mat-fab disabled>Disabled</button>&nbsp;
						<button mat-fab>
							<mat-icon aria-label="Example icon-button with a heart icon">favorite</mat-icon>
						</button>&nbsp;
						<a mat-fab routerLink=".">Link</a>
					</div>

				</div>
			</div>
		</m-material-preview>

		<m-material-preview [viewItem]="exampleMiniFav">
			<div class="m-section">
				<div class="example-container">
					<div class="button-row">
						<button mat-mini-fab>Basic</button>&nbsp;
						<button mat-mini-fab color="primary">Primary</button>&nbsp;
						<button mat-mini-fab color="accent">Accent</button>&nbsp;
						<button mat-mini-fab color="warn">Warn</button>&nbsp;
						<button mat-mini-fab disabled>Disabled</button>&nbsp;
						<button mat-mini-fab>
							<mat-icon aria-label="Example icon-button with a heart icon">favorite</mat-icon>
						</button>&nbsp;
						<a mat-mini-fab routerLink=".">Link</a>
					</div>
				</div>
			</div>
		</m-material-preview>
	</div>
</div>